@import "~assets/less/variable";

.filterConfig {
  height: 480px;
  margin: -24px;
  display: flex;
  flex-direction: row;

  .left {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: @light-bg;
    border-right: 1px solid @border-color-split;
  }

  .center {
    flex: 1;
    display: flex;
    flex-direction: row;

    .title {
      flex-shrink: 0;
      padding: 0 8px;
      position: relative;

      h2 {
        color: @light-text-color;
        font-size: 14px;
        line-height: 3em;
      }

      .rightSide {
        position: absolute;
        top: 10px
      }

      .interactionType {
        .rightSide;
        right: 8px;
      }

      .checkAll {
        .rightSide;
        right: 0;
        color: @light-text-color;
        font-weight: normal;
      }

      &.subTitle {
        border-top: 1px solid @border-color-split;
      }
    }
  }
}

.filterList {
  flex: 1;
  display: flex;
  flex-direction: column;

  .title {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px solid darken(@border-color-split, 2%);
    padding: 0 8px;

    h2 {
      flex: 1;
      padding-left: 8px;
      font-size: 14px;
      line-height: 3em;
      color: @light-text-color;
    }

    i {
      margin-left: 8px;
      font-size: 1.14em;
      color: @disabled-text-color;

      &:hover {
        color: @text-color;
        cursor: pointer;
      }
    }
  }

  .list {
    flex: 1;
    overflow-y: auto;

    li {
      .ellipsis;

      line-height: 24px;
      padding: 0 8px;
      box-sizing: border-box;
      border-bottom: 1px solid @border-color-split;
      cursor: pointer;

      label {
        padding-left: 8px;
        cursor: pointer;
      }

      &:hover {
        background-color: lighten(@primary-color, 30%);
      }

      &.selected {
        background-color: lighten(@primary-color, 30%);
      }
    }
  }

  .treeContainer {
    flex: 1;
    width: 200px;
    padding: 4px 0;
    overflow: auto;
  }

  .tree {
    // :global(li) {
    //   padding: 2px 0;
    // }
    :global(li span.ant-tree-switcher),
    :global(li span.ant-tree-iconEle) {
      height: 28px;
      line-height: 28px;
    }
    :global(li .ant-tree-node-content-wrapper) {
      height: 28px;
      line-height: 24px;
    }
    :global(.ant-tree-child-tree > li:first-child) {
      padding-top: 2px;
    }
    // :global(li .ant-tree-node-content-wrapper:hover),
    // :global(li .ant-tree-node-content-wrapper.ant-tree-node-selected) {
    //   background-color: transparent;
    // }
    // :global(li .ant-tree-node-content-wrapper.ant-tree-node-selected) {
    //   color: @primary-color;
    //   font-weight: bold;
    // }
  }
}

.treeNodeContent {
  display: flex;
  flex-direction: row;
  align-items: center;

  h4 {
    flex: 1;
    font-weight: normal;
    .ellipsis;
  }

  input {
    flex: 1;
    display: none;
  }

  i {
    flex-shrink: 0;
    margin-left: 8px;
    font-size: 1.14em;
    color: @disabled-text-color;

    &:hover {
      color: @text-color;
    }

    &.action,
    &.confirm {
      display: none;
    }

    &.action:last-child,
    &.confirm {
      margin-right: 3px;
    }
  }

  &:hover {
    i.action {
      display: block;
    }
  }

  &.editing {
    h4 {
      display: none;
    }

    input {
      display: block;
    }

    i {
      &.confirm {
        display: block;
      }
    }

    &:hover {
      i.action {
        display: none;
      }
    }
  }
}

.itemSelector {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: 280px;
  border-right: 1px solid @border-color-split;

  .itemList {
    flex: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    ul {
      flex: 1;
      overflow-y: auto;
    }

    li {
      height: 30px;
      display: flex;
      align-items: center;
    }

    .checkbox {
      padding: 0 16px;
      .ellipsis;
    }
  }

  .viewSet {
    flex: 1;
    overflow-y: auto;

    .related {
      padding: 0 16px 8px;
    }

    .empty {
      margin: 8px 0;
    }

    h4 {
      position: relative;
      color: @light-text-color;
      .ellipsis;

      &.variableSelect {
        padding-right: 116px;
      }

      .checkbox {
        position: absolute;
        top: 0;
        right: 0;
        color: @light-text-color;
        font-weight: normal;
      }
    }

    .formItem {
      margin: 2px 0 0 0;
    }

    .selector {
      width: 100%;
    }

    :global(.ant-form-item-label) {
      line-height: 32px;

      label {
        color: @light-text-color;
      }
    }
    :global(.ant-form-item-control) {
      line-height: 32px;
    }
  }
}

.filterFormContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.controlFormAntdOverride {
  .formBody {
    padding: 0 16px;
  }

  :global(.ant-form-item) {
    margin-bottom: 4px;
  }
  :global(.ant-form-item-label) {
    line-height: 1em;
  }
  :global(.ant-form-item-label label) {
    color: @disabled-text-color;
    font-size: 12px;
    font-weight: bold;
  }
  :global(.ant-form-item-required:before) {
    margin-right: 2px;
    vertical-align: middle;
  }
  :global(.ant-form-item-control) {
    line-height: 32px;
  }
}

.baseForm {
  flex-shrink: 0;
  .controlFormAntdOverride;

  .selector {
    width: 100%;
  }
}

.filterForm {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  .controlFormAntdOverride;

  .optionList {
    flex: 1;
    padding: 0 16px 16px;
    overflow-y: auto;
  }
}

.filterValuePreview {
  flex: 1;
  display: flex;
  flex-direction: column;

  .previewContent {
    display: flex;
    flex-direction: column;
    align-content: center;
  }

  ul {
    overflow-y: auto;
    flex: 1;

    li {
      line-height: 24px;
      padding: 0 8px;

      .ellipsis;
    }
  }
}

.controlPanel {
  background-color: @white;
  padding: 4px 8px 8px;
  margin-top: 16px;
  border-radius: 3px;
  display: flex;
  align-items: flex-end;

  &.empty {
    padding: 0;
    margin: 0;
    display: none;
  }

  .controls {
    flex: 1;
  }

  .actions {
    flex-shrink: 0;
    padding: 6px 8px;

    button {
      // margin-top: 20px;
      margin-left: 8px;

      &:first-child {
        margin-left: 0;
      }
    }
  }
}

.controlItem {
  margin: 2px 0;
  :global(.ant-form-item) {
    margin-bottom: 4px;
  }
  :global(.ant-form-item-label) {
    line-height: 1em;
  }
  :global(.ant-form-item-label label) {
    color: @disabled-text-color;
    font-size: 12px;
    font-weight: bold;
  }
  :global(.ant-form-item-required:before) {
    margin-right: 2px;
    vertical-align: middle;
  }
}

.optionsModal {
  .formItem {
    margin: 0;
  }

  :global(.ant-modal-header),
  :global(.ant-modal-body) {
    padding: 16px;
  }
}

.controlComponent {
  width: 100% !important;
}

.queryMode {
  margin-top: 4px;
  float: left;
}
